<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title></title>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />    
    <style>     
     /* 头部样式 */
     .topbar {background: #3A8B7A; height:50px; }
     #title { color:#FFF;} 
     .swipe {line-height: 50px;margin-right: 10px;color: #FF8400;}
     .back {float: left; padding-right: 30px;}
     .back img {height: 30px;margin-top: 10px;margin-left: 10px;}
     .topbar .title {line-height: 50px; font-size: 22px; position: absolute; left: 50%; -webkit-transform: translateX(-50%);transform: translateX(-50%);}
     .right {float: right; padding-left: 30px;}
     .right img {height: 30px;margin-top: 10px;margin-right: 10px;}  
     
     #wrapper {
            position: relative;
            z-index: 1;
            height: 35px;
            width: 96%; 
			padding-top:1px;
			border-bottom: 1px solid #E5E5E5;
        }

        #scroller {
            position: absolute;
            z-index: 1;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            width: 200%;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -webkit-text-size-adjust: none;
            border-top: 1px solid #E5E5E5;
        }

        #scroller ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: -webkit-box
        }

        #scroller li {
            margin-left: 20px;
            line-height: 35px;
            font-size: 16px;
            overflow: hidden;
            text-align: center;
        }

        /*
            iscroll
        */
        .nav_active {
            color: #a20909;
            font-size: 18px !important;
            border-bottom: 2px solid #a20909;
        }

        nav {
            width: 100%;
            display: -webkit-box;
            background-color: #ECECEC;
        }

        .arrow_down {
            display: block;
            background-size: 15px;
            background-repeat: no-repeat;
            background-position: center;
            padding: 15px;
            background-image: url('../image/channel_nav_arrow@2x.png');
            -webkit-box-flex: 1;
            -webkit-transform: rotate(90deg);
            -webkit-transition: All .5s ease;
        }

        .arrow_up {
            /*-webkit-transform: rotate(0deg);
            -webkit-transition: All .5s ease;*/
        } 
    </style>
  </head>
<body>
	<div id="wrap">  
       	<nav>
		    <div id="wrapper">
		        <div id="scroller">
		            <ul>   
		            </ul>
		        </div>
		    </div> 
		    <!--<div class="arrow_down" tapmode=""></div>-->
		</nav>  
	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>  
<script type="text/javascript" src="../script/alpenlicebe.js"></script>   
<script type="text/javascript" src="../script/zepto.min.js"></script>  
<script type="text/javascript" src="../script/hashes.min.js"></script> 
<script type="text/javascript" src="../script/iscroll.js"></script>    
<script type="text/javascript"> 
    apiready = function(){                   
		goto_getTopMenuFun();
    } 
    
    var myScroll= false;
    function goto_getTopMenuFun(){ 
    	var MD5 = new Hashes.MD5;   
       	var access_token = Alpe_getLocalStorge("access_token");                     
       	var admin_id = Alpe_getLocalStorge("admin_id"); 
       	var sign = MD5.hex(access_token+admin_id+'datas/GetMenu1.0syjqingbao');
            
       	var url = Alpe_ApiUrl+'r=datas/GetMenu&access_token='+access_token+'&admin_id='+admin_id
       		+'&status=report'
       		+'&v=1.0&sign='+sign;
       	api.ajax({
	         url: url,
	         method: 'get',
	         cache: false,
	         timeout: 30,			
	         dataType: 'json'
       	}, function(ret, err){ 
			if (ret) {	 
				if(ret.success == '100'){ 
					var navHtml = '', frames = [];
					$.each(ret.menulist, function (idx, v) {	 
						var cateID=v.id;
						var cateName=v.title; 
						var cateInfo=v.remarks; 
						
						var active = idx == 0 ? 'nav_active' : '', frame = {};
				   		navHtml += '<li data-index="' + idx + '" id="' + cateID+ '" class="' + active + '" tapmode="" onclick="goto_openFrameFun(this)">' + cateName + '</li>';
				    	frame.name = 'frame_' + idx;
				  		frame.url = idx == 0 ? 'tjfx_bg_IndexList.html' : 'tjfx_bg_IndexList.html';
				   		frame.pageParam = {cateID:cateID,cateName:cateName,cateInfo:cateInfo,index:idx};
						frames.push(frame);        
			        });
			        $("#scroller").find('ul').html(navHtml);	 
					goto_openFrameGroupFun(frames); 
					
					myScroll = new IScroll('#wrapper', {
			            eventPassthrough: true,
			            scrollX: true,
			            scrollY: false, 
			            preventDefault: false
			        });
				}else if("002"==ret.success||"003"==ret.success){ 
					goto_openWin_loginWin(ret.message);
				}else{	 		 
					api.toast({
		         		msg: ret.message,
                 		duration:2000,
                    	location: 'middle'
               		});         
		  		}
		  		api.hideProgress();
			}else{
				api.alert({title:'系统提示',msg:'错误码：'+err.code+'；错误信息：'+err.msg+'网络状态码：'+err.statusCode});
				api.hideProgress();
			} 
   		});
	}
	/*初始化frame*/
	function goto_openFrameGroupFun(frames) { 
		api.openFrameGroup({
            name: 'group_tjfx_bg',
            scrollEnabled: true,
            rect: {x: 0, y: api.pageParam.winY+40, w: 'auto', h: api.pageParam.winH-37},
            index: 0,
            preload:0,/*不预加载*/
            frames: frames
        }, function (ret, err) {
            if (ret.index >= 4) {
                myScroll.scrollTo(-$("li").width() * (ret.index - 4), 0, 2000); 
            }
            $("#scroller").find('li').removeClass('nav_active').eq(ret.index).addClass('nav_active');
        });
    }
    
	/*打开frame*/
	function goto_openFrameFun(obj) { 
        try {
            api.setFrameGroupIndex({
                name: 'group_tjfx_bg',
                index: $(obj).data('index'),
                scroll: true
            });
        } catch (e) {
            api.alert({title:'系统提示',msg:'错误信息：'+e}); 
        } 
    }
</script>
</html>